<style lang="less">
    @import '../../../styles/common.less';

    .ivu-page-options-sizer {
        width: 100px;
    }
</style>

<template>
    <Row>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>

                </Card>

            </Col>
        </Row>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title">项目环境切换</p>
                    <Row class="edittable-table-height-con">
                        <!--<can-edit-table refs="table2" v-model="editInlineData" :columns-list="editInlineColumns"></can-edit-table>-->
                        <Table
                                border :context="self"
                                :columns="table_data.header"
                                :data="table_data.data"
                                @on-sort-change="tableSort"
                        ></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page
                                :total="table_data.count"
                                class="float-right"
                                show-total
                                show-sizer
                                show-elevator
                                @on-change="updateTableCurrentPage"
                                @on-page-size-change="updateTablePageLength"
                                :page-size-opts="[10, 25, 50, 100]"
                        ></Page>
                    </Row>

                </Card>
            </Col>
        </Row>

        <Modal
                v-model="modalStatus"
                :title="modalTitle"
                :loading="modalLoading"
                @on-ok="modalOk"
        >
            <p>确认切换项目环境</p>

        </Modal>

    </Row>
</template>

<script>
    import util from '../../../libs/util';
    import qs from 'qs';

    export default {
        data () {
            return {
                self: this,
                table_data: {
                    header: [
                        {
                            title: '编号',
                            type: 'index',
                            width: 60,
                            align: 'center'
                        },
                        {
                            title: '项目名称',
                            key: 'name',
                            sortable: 'custom'
                        },
                        {
                            title: '项目所在环境',
                            key: 'get_status_display'
                        },
                        {
                            title: '创建人',
                            key: 'oper_user__username',
                            sortable: 'custom'
                        },
                        {
                            title: '创建时间',
                            key: 'create_date',
                            sortable: 'custom',
                            render: (h, params) => {
                                let createDate = params.row.create_date ? params.row.create_date.replace('T', ' ') : '';
                                return h('span', createDate);
                            }
                        },
                        {
                            title: '操作',
                            key: 'action',
                            width: 200,
                            align: 'center',
                            render: (h, params) => {
                                console.log('params -->', params.row);
                                this.modalTitle = '切换到正式环境';
                                if (params.row.status === 1) {
                                    this.modalTitle = '切换到灰度环境';
                                }
                                return [
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        on: {
                                            'click': () => {
                                                // 弹出修改模态对话框
                                                this.modalLoading = true;
                                                this.modalStatus = true;
                                                this.modalId = params.row.id;
                                            }
                                        }
                                    }, this.modalTitle)
                                ];
                            }
                        }
                    ],
                    data: [],
                    count: 0,
                    length: 10,
                    current_page: 1,
                    order: '-create_date'
                },
                modalStatus: false,
                modalId: null,
                modalLoading: false,
                modalTitle: '',
                userData: [] // 所有用户信息
            };
        },
        methods: {
            // 初始化获取表格数据
            initData () {
                let params = {
                    'current_page': this.table_data.current_page,
                    'length': this.table_data.length,
                    'order': this.table_data.order,
                    'company_id': localStorage.company_id
                };

                util.ajax.get('api/project_env_switch', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.table_data.data = res.data.data.ret_data;
                        this.table_data.count = res.data.data.data_count;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            },

            modalOk () {
                util.ajax.post('api/project_env_switch/switch_status/' + this.modalId).then(res => {
                    if (res.data.code === 200) {
                        this.modalStatus = false;
                        this.$Notice.success({
                            title: '切换成功',
                            duration: 2
                        });
                        this.initData();
                        console.log('修改成功 -->', res.data, this.modalStatus);
                    } else {
                        // 修改失败
                        console.log('res.data.msg -->', res.data.msg);
                        // for (let key in res.data.msg) {
                        //     this.modalData.Update.formItemError[key] = res.data.msg[key][0].message;
                        // }
                    }

                    this.modalLoading = false;
                });
            },

            // 当页码被改变是触发
            updateTableCurrentPage (currentPage) {
                this.table_data.current_page = currentPage;
                this.initData();
            },

            // 修改每页显示数量
            updateTablePageLength (length) {
                this.table_data.length = length;
                this.initData();
            },

            // 表格排序触发
            tableSort (e) {
                let key = e.key;
                let order = e.order;

                if (order === 'desc') {
                    this.table_data.order = '-' + key;
                } else {
                    this.table_data.order = key;
                }
                this.initData();
            }
        },
        created () {
            this.initData();
        }
    };
</script>
